<template>
  <div class="top">
    <div @click="menuSwitch" class="menuTool">
      <a-icon :type="$root.app.menuClosed?'menu-unfold':'menu-fold'" />
    </div>
    <div style="flex:1"></div>
    <div class="btn">
      <a-badge dot>
        <a-icon style="font-size:18px;" type="bell" />
      </a-badge>
    </div>
    <a-dropdown>
      <div class="btn">
        <a-icon type="user" />
      </div>
      <a-menu slot="overlay">
        <a-menu-item>
            <a-icon type="user" class="menuIcon" />个人中心
        </a-menu-item>
        <a-menu-item>
            <a-icon type="setting" class="menuIcon" />修改密码
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item @click="logout">
            <a-icon type="logout" class="menuIcon" />退出登录
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-dropdown>
      <div class="btn">
        <a-icon type="global" />
      </div>
      <a-menu slot="overlay">
        <a-menu-item>
          <a href="javascript:;">CN 简体中文</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">HK 繁體中文</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">EN English</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>
<script>
import cookie from "js-cookie";
//todo 此处应该有个搜索框，搜索菜单用的
//todo 此处应该有个面包屑的导航，提示用户打开了哪个页面
export default {
  methods: {
    async logout(){
      let result = await this.$post("/system/user/logout",{});
      if(result.error) return;
      cookie.remove('__ya');
      this.$router.push('/login');
    },
    menuSwitch() {
      // this.bus.$emit('menuSwitch');
      this.$root.app.menuClosed = !this.$root.app.menuClosed;
    }
  }
};
</script>

<style scoped lang="scss">
.top {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 60px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background: #fff;
  display: flex;


  .menuIcon {
    margin-right: 8px;
  }
  .btn {
    height: 60px;
    line-height: 60px;
    width: 60px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    color: #666;
  }
  .btn:hover {
    background: rgba(0, 0, 0, 0.025);
  }
  .menuTool {
    width: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    font-size: 20px;
  }
}
</style>


